import React, { useState } from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import routers from "../../routers";
import { Button, Layout, Menu, theme, Select, Space } from "antd";
import { NavLink, Outlet, useNavigate } from "react-router-dom";
import "./index.css";
const { Header, Sider, Content } = Layout;

const Index: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const items = routers[3].children?.map((v, i) => ({
    key: v.key,
    label: <NavLink to={v.path}>{v.meate}</NavLink>,
    icon: v.icon,
  }));
  const tc = () => {
    navigate("/login");
    localStorage.removeItem("token");
    localStorage.removeItem("row");
    localStorage.removeItem("info");
    localStorage.removeItem("user");
  };
  const handleChange = (value: string) => {
    localStorage.setItem("row", value);
    localStorage.setItem("user", value);
    window.location.reload();
    console.log(value)
    if (value=='admin') {
      localStorage.setItem('info',"https://t7.baidu.com/it/u=3713375227,571533122&fm=193&f=GIF")
    }else{
      localStorage.setItem('info',"https://t7.baidu.com/it/u=1723458001,3671360301&fm=193&f=GIF")
    }
  };

  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <div className="head">
          <div className="title">ReactTypescript {localStorage.getItem("row") == "admin" ? "Admin" : "User"}</div>
          <img src={localStorage.getItem("info")!} className="img" />
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={["1"]}
          items={items}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <div className="headbtn">
            <div className="tt">
              用户名:
              <Select
                defaultValue={
                  localStorage.getItem("row") == "admin" ? "admin" : "user"
                }
                style={{ width: 120 }}
                onChange={handleChange}
                options={[
                  { value: "admin", label: "admin" },
                  { value: "user", label: "user" },
                ]}
              />
              用户身份:
              {localStorage.getItem("row") == "admin" ? "管理员" : "普通用户"}
            </div>

            <Button danger onClick={() => tc()}>
              退出
            </Button>
          </div>
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 800,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};
export default Index;
